<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8"/>
    <meta name='description' content='CNode：Node.js专业中文社区'>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="nodejs, node, express, connect, socket.io"/>
    <link rel="icon" href="//o4j806krb.qnssl.com/public/images/cnode_icon_32.png" type="image/x-icon"/>
    <title>CNode：Node.js专业中文社区</title>
    <link rel="stylesheet" href="assets/lib/seedsui/seedsui.min.css">
    <script src="assets/lib/zepto/zepto.min.js"></script>
    <script src="assets/lib/artTemplate/template-web.js"></script>
    <link rel="stylesheet" href="assets/lib/markdown/examples/css/style.css" />
    <link rel="stylesheet" href="assets/lib/markdown/css/editormd.css" />
    <style>
        section article{
            bottom:53px;
            top:64px;
        }
    </style>
</head>
<body>
<div id="section_container">
    <section>
    <header>
        <div class="titlebar">
            <a data-toggle="back" href="javascript:history.go(-1);">
                <i class="icon icon-arrowleft"></i>
            </a>
            <h1 class="titlebar-title text-center">发布话题</h1>
        </div>
    </header>

    <article id="main_content">
        <form class="group" id="form" style="padding:0 8px;">
            <div class="inputbox underline">
                <input type="hidden" name="accesstoken" id="accesstoken"/>
            </div>
            <div class="inputbox underline">选择版块：
                <select name="tab" class="input-text">
                    <option>请选择</option>
                    <option value="share">分享</option>
                    <option value="ask">问答</option>
                    <option value="job">招聘</option>
                </select>
                <i class="color-placeholder icon icon-arrowdown"></i>
            </div>
            <div class="inputbox underline">
                <input type="text" class="countvalue input-text" name="title" data-minlength="10" data-maxlength="30" placeholder="请输入标题"/>
                <p class="color-placeholder">10/30</p>
            </div>
            <div class="inputbox" id="test-editormd">
                <textarea name="content" class="countvalue input-textarea"  placeholder="请输入话题信息"></textarea>
                <p class="color-placeholder" style="position:absolute;bottom: 10px;right:0;"></p>
            </div>
            <!--<button class="button info submit left-bottom" id="submit" type="button" style="height:32px;line-height:32px;padding:0 8px;">发布</button>-->
            <input class="button info submit" id="submit" type="button" value="发布">
        </form>
    </article>
    </section>
    <footer>
        <ul class="tabbar tabbar-footer">
            <li class="tab"  page="index.html">
                <i class="icon icon-home"></i>
                <label class="tab-label">首页</label>
            </li>
            <li class="tab" page="message.html">
                <i class="icon icon-chat"></i>
                <label class="tab-label">消息</label>
            </li>
            <li class="tab" page="user.html">
                <i class="icon icon-person"></i>
                <label class="tab-label">我的</label>
            </li>
        </ul>
    </footer>
    <!-- 加载遮罩 -->
    <div class="loading" id="ID-Loading" style="display: none;background-color: white;">
        <div class="loading-progress-box">
            <div class="loading-progress"></div>
        </div>
    </div>
</div>
<script id="loginTemplate" type="text/html">
    <form id="loginForm" data-input="clear">
        <div class="group"  style="padding:0 12px;">
            <div class="inputbox basketline">
                <textarea class="input-pre"  name="accesstoken" placeholder="Access Token"></textarea>
                <pre style="width: 374px;">
                <span></span>
            </pre>
                <div class="hline"></div>
            </div>
        </div>
        <div style="margin:0 12px;">
            <input type="button" class="button submit block" style="width:100%;" value="登录"/>
        </div>
    </form>
</script>
<script src="assets/lib/markdown/editormd.js"></script>
<script src="assets/lib/seedsui/seedsui.min.js"></script>
<script src="assets/js/common.js"></script>
<script>
    //隐藏遮罩
    var loading=new Loading({
        container:"#ID-Loading"
    });
    setTimeout(function(){
        loading.hide();
    },500);



    $(function() {
        var testEditor = editormd("test-editormd", {
            width: "100%",
            height: 500,
            path : 'assets/lib/markdown/lib/',
            watch : false,
            toolbarIcons : function() {
                // Or return editormd.toolbarModes[name]; // full, simple, mini
                // Using "||" set icons align right.
                return [ "bold", "italic", "|", "quote", "list-ul",  "list-ol","|", "link", "image",  "|", "info", "preview","||", "fullscreen"]
            },
            // toolbarIcons : "full", // You can also use editormd.toolbarModes[name] default list, values: full, simple, mini.

            onload : function(){
                $("[type=\"file\"]").bind("change", function(){
                    alert($(this).val());
                    testEditor.cm.replaceSelection($(this).val());
                    console.log($(this).val(), testEditor);
                });
            }
        });
    });

    $('#accesstoken').ready(function () {
        var data = localStorage.getItem('accessToken');
        $('#accesstoken').val(data);
        //console.log(data);
    });

    $('#submit').click(function () {
        $.ajax({
            type:"POST",
            url:"https://cnodejs.org/api/v1/topics",
            data:$('#form').serialize(),
            dataType:"json",
            success:function (data) {
                 if(data ==null){
                     var popAlert=new Alert("发布失败，请重新发布",{"title":false});
                     popAlert.show();
                 }else {

                 }
            }
        })
    });
</script>
</body>
</html>